<template>
    <view class="container wrap">
      <js-error mode="bottom" ref="jsError"></js-error>

      <u-sticky class="u-sticky">
        <u-tabs
          :list="isReadList"
          :is-scroll="isScroll"
          :current="current"
          @change="change"
          active-color="#aaaaaa"
          font-size="26"
          inactive-color="#666666"
          bg-color="rgba(62, 151, 176,0.1)"
          :active-item-style="activeItemStyle"
          :scrollX="scrollX"
        ></u-tabs>

      </u-sticky>
      <scroll-view
        class="scroll-list"
        :style="{ height: scrollViewHeight + 'px' }"
        scroll-y="true"
        @scrolltolower="loadMore"
        :refresher-enabled="true"
        :scrolltolower-enabled="true"
        :refresher-triggered="triggered"
        @refresherrefresh="refresherrefresh"
      >
        <view v-if="current==0" style="height: 100%;">
          <u-cell-group class="list" :border="false">
              <u-swipe-action  v-for="(item, index) in list" :key="item.id" :index="index">
                  <u-cell-item :arrow="true" @click="handleCellItemClick(item)">
                      <text slot="title">{{item.fileName}}</text>
                  </u-cell-item>
              </u-swipe-action>
          </u-cell-group>
          <view v-if="list.length" class="loadmore" style="justify-self: flex-end">
            <u-loadmore :status="loadStatus"></u-loadmore>
          </view>
          <u-empty v-if="!list.length" style="height: 100%;"></u-empty>
        </view>
        <view v-else-if="current==1"  class="video-list-container" style="height: 100%;">
          <view v-for="(item, index) in list" :key="index" class="video-column" @click.stop="handleCellItemClick(item)">
              <!-- <video :src="item.fileUrl" controls object-fit="cover"   :style="{ width: '100%', height: '200px' }" :poster="item.poster"></video> -->
               <image :src="item.poster" mode="aspectFill" style="width: 100%; height: 200px;"></image>
              <view class="video-name">{{ item.fileName }}</view>
              <view class="play-button-container">
                <u-icon name="play-right" size="60" color="#ffffff"></u-icon>
              </view>
          </view>
          <view v-if="list.length" class="loadmore" style="justify-self: flex-end;width: 100%;">
            <u-loadmore :status="loadStatus"></u-loadmore>
          </view>
          <u-empty v-if="!list.length"  style="margin: 0 auto; display: flex; justify-content: center; align-items: center; height: 100%;"></u-empty>
        </view>
        



      </scroll-view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeItemStyle: {
          backgroundColor: "#FAFAFA",
          color: "#333",
        },
        backgroundColor: {
          backgroundColor: "#3E97B0",
        },
        backTextStyle: {
          color: "#fff",
        },
        triggered: false,
        show: false,
        smshow: false,
        focus: true,
        barCode: "",
        isScroll: false,
        list: [ ],
        
        isReadList: [
          {
            name: "PDF",
          },
          {
            name: "视频",
          },
          
        ],
        query: {
          pageNo: 1,
          pageSize: 20,
          // orderBy: "a.create_date desc",
        },
        current: 0,
        loadStatus: "loadmore",
        dictName: "",
        img: "",
        scrollViewHeight: 0,
        headerHeight: 0,
        videoHeight: 200, // 初始高度
        bizKey:'',
        scrollX:false,
      };
    },
    computed: {
      isSingleVideo() {
        return this.list.length <= 1;
      },
    },
    watch: {
      isSingleVideo(newVal) {
        this.videoHeight = newVal ? 'calc(100vh - 100px)' : 'calc(50vh - 50px)'; // 调整高度逻辑，这里的减去的值需要根据你的标题栏、底部栏等高度调整
      },
    },
    onLoad(e) {
      
      console.log(e);
      this.bizKey = e.bizKey;
      this.query.bizKey = this.bizKey;
      this.query.fileType = this.current
      console.log(this.vuex_config.baseUrl);
      this.loadData();
      
    },
    mounted() {
      this.calculateScrollViewHeight();
    },
    onShow() {
      // this.query.pageNo = 1;
      this.loadData();
    },
    methods: {
        handleCellItemClick(item) {
            if (item.fileUrl.endsWith('.pdf')) {
                // 阅读PDF文件的逻辑
                uni.navigateTo({
                    url:'/pages/mes/files/pdf?item='+encodeURIComponent(JSON.stringify(item))
                });
            } else if (item.fileUrl.endsWith('.mp4') || item.src.endsWith('.avi')) {
                // 播放视频的逻辑
                // uni.navigateTo({
                // url: `/pages/videoPlayer/index?videoUrl=${item.name}`,
                // });
                uni.navigateTo({
                    url:'/pages/mes/files/pdf?item='+encodeURIComponent(JSON.stringify(item))
                });
            } else {
                // 其他类型或者错误处理
                uni.showToast({
                title: '未知类型，无法打开',
                icon: 'none',
                });
            }
        },
      async calculateScrollViewHeight() {
        const query = uni.createSelectorQuery().in(this);
  
        // 计算u-sticky头部高度
        query
          .select(".u-sticky")
          .boundingClientRect((rect) => {
            this.headerHeight = rect.height;
            console.log(this.headerHeight, "headerHeight-u-sticky");
          })
          .exec((results) => {
            // 确保所有查询完成后再进行后续计算
            if (results && results.length) {
              console.log(this.headerHeight, "headerHeight");
              this.tabBarHeight = 0; // 假设tabbar高度为50px，实际应根据实际情况获取
  
              // 获取屏幕高度
              const systemInfo = uni.getSystemInfoSync();
              const screenHeight = systemInfo.windowHeight;
  
              // 计算scroll-view高度
              this.scrollViewHeight =
                screenHeight - (this.headerHeight + this.tabBarHeight);
            }
          });
      },

      change(index) {
        this.current = index;
        this.query.fileType = this.current;
        this.query.pageNo = 1;
        this.loadData();
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.pageNo += 1;
          this.loadData("add");
        }, 100);
      },
      async refresherrefresh() {
        this.triggered = true;
        this.query.pageNo = 1;
        await this.loadData();
        setTimeout(() => {
          this.triggered = false;
        }, 500);
        // this.triggered = false;
      },
      loadData(type) {
        this.$u.api.kst.findByType(this.query).then((res) => {
          console.log(res);
          this.show = false;
          if (res.data.length < 20 || res.data.length == 0) {
            this.loadStatus = "nomore";
            this.list = res.data;
          }else{
              var data = res.data;
              // 添加isReadBlockVisible 属性
              if (type == "add") {
                for (var i = 0; i < data.length; i++) {
                  this.list.push(data[i]);
                }
              } else {
                this.list = data;
              }
          }
          

          if(this.current == 0){
            this.list.forEach((item) => {
              item.fileUrl = this.vuex_config.baseUrl + item.fileUrl;
              item.type = "2";
            });
          }else if(this.current == 1){
            this.list.forEach((item) => {
              item.fileUrl = this.vuex_config.baseUrl + item.fileUrl;
              item.poster = 'http://192.168.1.49:8080/app/static/staticKst/liticang.jpg'
              item.type = "3";
            });
          }
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .play-button-container {
    position: absolute; /* 绝对定位使图标能相对于.video-column定位 */
    top: 50%; /* 将图标向上移动自身高度的一半 */
    left: 50%; /* 将图标向左移动自身宽度的一半 */
    transform: translate(-50%, -50%); /* 使用translate调整位置，使其完全居中 */
    width: 60px; /* 根据图标大小调整容器尺寸 */
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;

  }
  .batch-read {
    margin-right: 20rpx;
    color: #fff;
  }
  .dddate {
    text-align: center;
  }
  .content {
    display: flex;
    background: #fff;
    margin: auto 30rpx;
    border-radius: 20rpx;
    flex-direction: column;
  }
  .content-type {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid #f1f0f0;
    width: 100%;
    justify-content: space-between;
  }
  .content-type-type-icon{
    display: flex;
  }
  .content-type-icon {
    display: flex;
    align-items: center;
  }
  .content-type-icon-img {
    width: 46rpx;
    height: 46rpx;
    margin-right: 10rpx;
  }
  .content-type-title {
    color: #000;
    font-weight: bold;
  }
  .content-content {
    padding: 20rpx 30rpx;
  }
  .content-title {
    margin: 20rpx 0;
    font-weight: bold;
    font-size: 36rpx;
  }
  .content-footer {
    display: flex;
    justify-content: space-between;
    border-top: 2rpx solid #f1f0f0;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
  }
  .list {
    margin: 20rpx 0;
    position: relative;
  }
  .read-block {
    position: absolute;
    top: -16rpx;
    background: rgba($color: #969696, $alpha: 0.5);
    padding: 10rpx 20rpx;
    color: #1a1919;
    left: 80%;
    transform: translateX(-80%);
  }
  .read-block::after {
    // 倒三角形，位于底部
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    border-top: 10rpx solid rgba($color: #969696, $alpha: 0.5);
    bottom: -10rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .flex-column {
    display: flex;
    flex-direction: column;
  }

.video-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 分布空间，使项目之间保持一定距离 */
  margin-top: 20rpx;
}

.video-column {
  flex: 1 1 calc(50% - 10px); /* 让列自适应宽度，减去间隙 */
  margin: 0 10rpx 20rpx; /* 底部外边距，可根据需要调整 */
  position: relative;
  
  /* 当只有一条数据时，强制该列占满行 */
  &:only-child {
    flex: 0 0 100%; /* 不缩放，占满全宽 */
    margin: 0 auto; /* 居中 */
    position: relative;
  }
}

.video-name {
  text-align: center;
  margin-top: 10rpx;
}

  </style>